<template>
    <div>
        <fieldset> 
		<legend>
		<h3>手机号查询单据信息</h3></legend>
		<div>
			手机号：<el-input style="width:200px;"  v-model="phone" ></el-input><el-button @click="findAddressByPhone">查询</el-button>
            <div>{{addr}}</div>
		</div>
	</fieldset>
    <fieldset> 
		<legend>
		<h3>商户号信息查询单据信息</h3></legend>
		<div>
			商户号：<el-input  style="width:300px;" v-model="searchInfo" ></el-input><el-button @click="searchData">查询</el-button>
		    <div>{{messages}}</div>
            <div>
			<el-table  border  
					:data="content"
					stripe
					style="width: 100%" id="celltable">
					<el-table-column prop="wechatNo" label="商户订单号" align="center"> </el-table-column>
					<el-table-column prop="orderCode" label="农商行订单编号（我方请求）" align="center"> </el-table-column>
					<el-table-column prop="orderAmount" label="金额" align="center"> </el-table-column>
                    <el-table-column prop="refundStatus" label="状态" align="center"> </el-table-column>
					<el-table-column label="操作" width="230px;" align="left">
						<template scope="scope">
							<el-button size="mini" @click="findDetail(scope.row.orderCode)">查看相关订单信息</el-button>
							<el-button type="mini" @click="opendg(scope.row.orderCode)">退款</el-button>
						</template>
					</el-table-column>
			</el-table>
			<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNo"
					:page-sizes="[5, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>

            <el-dialog
                title="退款"
                :visible.sync="dialogVisible"
                width="30%">
                <table>
                    <tr>
                        <td>订单号：</td><td>  <input type="text" style="width:300px;"  v-model="refundmsg.orderNo" > </td>
                    </tr>
                    <tr>
                        <td>商户订单号：</td><td>  <input type="text" style="width:300px;"  v-model="refundmsg.merchantNo" > </td>
                    </tr>
                    <tr>
                        <td>备注：</td><td> <input type="text" style="width:300px;" v-model="refundmsg.remark" > </td>
                    </tr>
                    <tr>
                        <td>密码：</td><td> <input type="text" style="width:300px;" v-model="refundmsg.password" > </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="refund">确 定</el-button>
                </span>
            </el-dialog>
		</div>
		</div>
	</fieldset> 
    </div>
</template>

<script>
    import  {findAddrByPhone,searchPayment,findOrderInfos,returnMoney} from '@/api/kz/kzapi.js'

    export default {
        data(){
            return {
                messages : "",
                phone : "" ,
                addr : "" ,
                searchInfo : "",
                handleClose :  false ,
                dialogVisible: false ,
                refundmsg : {
                    orderNo : "" ,
                    password : "" ,
                    merchantNo : "" ,
                    remark : "" 
                },
                details : [],
                content : [],
                pageNo: 0,
                pageSize: 10,
                total : 0
            }
        },
        methods : {
            searchData : function(){
				this.fetchData(0,10);
			},
			handleSizeChange: function (size) {
		        this.pageSize = size;
		        this.fetchData(this.pageNo , size );
		    },
		    handleCurrentChange: function(pageNo){
                this.pageNo = pageNo;
                // console.log(this.pageNo, this.pagesize)
		        // this.fetchData(pageNo,this.pagesize);
		        this.fetchData(pageNo,this.pageSize);
		    },
		    fetchData: function(pageNo,pageSize){
		    	var _this = this ;
		    	var data= {
		    		pageNo : pageNo ,
		    		pageSize : pageSize ,
		    		wechatno  : _this.searchInfo
                };
                searchPayment(data).then((response)=>{
                   	this.$set(this,"content",response.data.content);
					this.$set(this,"total",response.data.total);
                }).catch((error)=>{
                    console.log(error);
                })
		    },
            findAddressByPhone : function(){
                findAddrByPhone({phone:this.phone}).then((response)=>{
                    console.log("------------",response.data);
                    this.addr = response.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            refund : function(){
                returnMoney(this.refundmsg).then((response)=>{
                    console.log(response.data);
                    if(response.data.succeed == true){
                        this.$message(response.data.msg);
                        this.searchData();
                    }else{
                        this.$message(response.data.msg);
                    }
                    
                }).catch((error)=>{
                    console.log(error);
                })
            },
            findDetail: function(code){
				var data = {
					merchantCode : code
				}
				findOrderInfos(data).then((response)=>{
                    var html = "" ;
                    for(var i = 0 ;i< response.data.length;i++){
                        html += "【"+(i+1)+"】  "+response.data[i]+"<br>";
                    }
                     this.messages =html;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            opendg : function(orderNo){
				this.$set(this,"dialogVisible",true);
				this.$set(this.refundmsg,"orderNo",orderNo);
				this.$set(this.refundmsg,"merchantNo",this.searchInfo);
				this.$set(this.refundmsg,"remark","");
			}
        }
    }
</script>

<style scoped>

</style>